<template>
  <div class="QRcode-info">
    <div class="container">
      <div class="trading-info-title text-overflow">扫码交易信息</div>
      <div class="filter-box">
        <!-- 状态查询 -->
        <div class="filter-by-status filter-cell">
          <el-select class="filter-select" v-model="filter.tradeStatus" clearable placeholder="订单状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 类型查询 -->
        <div class="filter-by-type filter-cell">
          <el-select class="filter-select" v-model="filter.orderType" clearable placeholder="订单类型">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 订单号 -->
        <div class="filter-by-type filter-cell">
          <el-input class="filter-select" v-model="filter.orderNo" placeholder="请输入订单号"></el-input>
        </div>
        <!-- 商户手机号 -->
        <div class="filter-by-type filter-cell">
          <el-input class="filter-select" v-model="filter.shopPhone" placeholder="请输入商户手机号"></el-input>
        </div>
        <div style="padding:20px 40px">
          <el-button style="width:180px" @click="handleQuery(0)">查询</el-button>
        </div>
      </div>

      <div class="list-box" v-loading="loading">
        <div class="dash-info">
          <div> <span class="dash-label">总金额</span> <span> ￥ {{dashboardInfo.statsAmount}}</span> </div>
          <div> <span class="dash-label">总手续费</span> <span>￥ {{dashboardInfo.statsFee}}</span> </div>
        </div>
        <el-table :data="info" style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            v-for="cell in InfoHeader"
            :key="cell.prop"
            :prop="cell.prop"
            :label="cell.label"
            :formatter="formatterList"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="80">
            <template slot-scope="scope">
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
              <el-button type="text" @click="handleSync(scope.row)" size="small">同步订单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages-control">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pages.currentPage"
          :page-size="pages.page_size"
          layout="prev, pager, next, jumper"
          :total="pages.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "QRcode-info",
  data() {
    return {
      info: [],
      dashboardInfo:{statsAmount:0,statsFee:0},
      InfoHeader: [
        { prop: "orderNo", label: "订单号" },
        { prop: "userId", label: "用户编号" },
         { prop: "userName", label: "用户名称" },
        { prop: "orderType", label: "订单类型" },
        { prop: "merchantName", label: "商户名称" },
        { prop: "totalAmount", label: "订单金额" },
        {prop:"agentFee",label:"代理商分润"},
        {prop:"platformFee",label:"平台分润"},
        {prop:"statsAmount",label:"消费总金额"},
        { prop: "body", label: "商品信息" },
        { prop: "tradeStatus", label: "订单状态" },
        { prop: "createTime", label: "创建时间" }
      ],
      typeList: [
        { value: "WECHAT", label: "微信" },
        { value: "ALIPAY", label: "支付宝" }
      ],
      statusList: [
        { value: "WAIT_BUYER_PAY", label: "创建" },
        { value: "TRADE_SUCCESS", label: "成功" },
        { value: "TRADE_FAILURE", label: "失败" },
        { value: "TRADE_FINISHED", label: "完结" },
        { value: "TRADE_CLOSED", label: "关闭" },
        { value: "TRADE_REFUND", label: "转入退款" },
        { value: "TRADE_REVOKED", label: "已撤销" },
        { value: "TRADE_PAYING", label: "用户支付中" },
      ],
      filter: {
        orderType: "", //
        tradeStatus: "", //
        orderNo:'',
        shopPhone:'',
      },
      pages: {
        total: 10,
        page_size: 20,
        currentPage: 1
      }
    };
  },
  components: {},
  created() {
    this.handleQuery();
  },
  mounted() {},
  methods: {
    handleCurrentChange(value) {
      this.handleQuery(value - 1);
    },
    handleQuery(page = 0) {
      let url = `paymentchannel/pay_order/query/lists`;
      const userId = sessionStorage.getItem(4);
      let params = `?userId=${userId}&page=${page}&size=${this.pages.page_size}`;
      this.loading = true;
      for (let key in this.filter) {
        if (this.filter[key]) {
          params += `&${key}=${this.filter[key]}`;
        }
      }
      this.$Http
        .get(url + params)
        .then(res => {
          this.loading = false;
          if (res.data.resp_code === "000000") {
            this.info = res.data.result.page.content;
            this.pages.total = res.data.result.page.totalElements;
            this.dashboardInfo = {
               statsAmount: res.data.result.statsAmount,
               statsFee: res.data.result.statsFee,
               grade: res.data.result.grade,
            }
          } else {
            this.$notify.info({
              title: "消息",
              message: res.data.resp_message || "请求列表失败！"
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$notify.info({
            title: "温馨提示",
            message: "服务器繁忙！"
          });
        });
    },
    handleSync({orderNo,userId,tradeStatus}){
      if( !(tradeStatus === '待支付' || tradeStatus === '待处理' || tradeStatus === '支付中' || tradeStatus === '失败')){
        this.$message.info(`订单目前处于${tradeStatus}！ 无需同步状态！`);
        return;
      }
      const url = `channel/fast_silver/syn_order?orderNo=${orderNo}&userId=${userId}`;
      this.$Http.get(url).then(res=>{
        if(res.data.resp_code === '000000'){
          this.$message.success('同步订单状态成功！')
        }else{
          this.$message.warning(res.data.resp_message);
        }
      }).catch(err=>{
        this.$message.error(`服务器繁忙！请稍后再试！`)
      })

    },
    formatterList(row, column, cellValue, index) {
      //  格式化信息
      
      if(column.label === "创建时间"){
          return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
      } else{
          return cellValue===null?'--':cellValue;
      }
    }
  }
};
</script>
<style scoped>
.QRcode-info {
  box-sizing: border-box;
  padding: 20px;
}
.container {
  border: 1px solid #ededed;
}
.trading-info-title {
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.filter-input,
.filter-select {
  width: 160px;
  margin-right: 10px;
}
.filter-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.pages-control {
  border-top: 1px solid #ededed;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dash-info{
  height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;

}
.dash-info div{
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  background-color: #e0e2e5;
  color: rgba(0,0, 0, .7)
}
.dash-info div span{
  font-size: 24px;
  font-weight: 600;
  padding-top: 10px;
}
.dash-info div span.dash-label{
   font-size: 16px;
   font-weight: 600;
   display: inline-block;
   padding: 10px 0;
}

</style>